<template>
  <div class="index-footer">
    <ul class="clearfix">
      <router-link :to="{path:'/home/tab'}" :class="{'router-link-active':isShow}" tag="li">
        <i class="iconfont">&#xe653;</i>
        <p>首页</p>
      </router-link>
      <router-link :to="{path:'/hotPic/tab'}" tag="li">
        <i class="iconfont">&#xe655;</i>
        <p>热力图</p>
      </router-link>
      <!-- <router-link tag="li" :to="{path:'/attention'}">
        <i class="iconfont">&#xe627;</i>
        <p>关注</p>
      </router-link> -->
      <keep-alive><router-link :to="{path:'/my'}" tag="li">
        <i class="iconfont">&#xe625;</i>
        <p>我的</p>
      </router-link>
      </keep-alive>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShow: false
    }
  },
  mounted () {
    let routers = this.$route.path
    if (routers === '/Home/tab') {
      this.isShow = true
    }
  }
}

</script>
<style lang="scss">
.index-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ece7e7;
  ul {
    display: flex;
    display: -webkit-flex;
    li {

      flex: 1;
      text-align: center;
      padding: .10rem 0 0 0;
      color: #999;
      p {
        font-size: .24rem;
        line-height: .40rem;
        height: .40rem;
      }
      &.router-link-active {
        color: #138cef;
      }
      i {
        line-height: .40rem;
        height: .40rem;
        display: inline-block;
      }
      &:nth-child(1) {
        i {
          font-size: .40rem;
        }
      }
      &:nth-child(2) {
        i {
          font-size: .40rem;
        }
      }
      &:nth-child(3) {
        i {
          font-size: .40rem;
        }
      }
      &:nth-child(4) {
        i {
          font-size: .40rem;
        }
      }
      &:nth-child(5) {
        i {
          font-size: .40rem;
        }
      }
    }
  }
}

</style>
